<template>
  <el-card>
    <div slot="header">
      <span>查看关系</span>
    </div>
    <BasicTable
      :showSelectCol="false"
      showPagination
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :tableHeight="400"
      :pagination="pagination"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
    <el-row type="flex" justify="center" class="page-footer">
      <el-button @click="handleCancel">返回</el-button>
    </el-row>
  </el-card>
</template>
<script>
import BasicPage from '@/mixins/supplier/basicPage';
import BasicTable from '@/components/supplier/BasicTable';
import {
  queryInvoicingSupplierDetailService,
} from '@api/supplier/management/invoicingSupplier';
import { BIND_TABLE_COLUMNS } from './constants'
import { isResponseSuccess, getHasIndexTableData } from '@/pages/supplier/utils/bizUtils';

export default {
  mixins: [ BasicPage ], // 分页数据及方法 表单基础方法
  components: {
    BasicTable,
  },
  data () {
    return {
      supplierId: null,
      tableInfo: {
        list: [],
        columns: BIND_TABLE_COLUMNS,
        loading: false
      },
      invoiceSupplierId: ''
    };
  },
  created () {
    const { invoiceSupplierId } = this.$route.query;
    if (invoiceSupplierId) {
      this.invoiceSupplierId = invoiceSupplierId;
      this.getTableData();
    }
  },
  methods: {
    // 获取详情
    getTableData () {
      const data = {
        invoiceSupplierId: this.invoiceSupplierId,
        ...this.pagination
      }
      this.tableInfo.loading = true;
      queryInvoicingSupplierDetailService(data).then((res) => {
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          const { records, total } = res.result;
          this.tableInfo.list = getHasIndexTableData(records, this.pagination);
          this.pagination.total = total;
        }
      }).catch(() => {
        this.tableInfo.loading = false;
      });
    },
    // 取消
    handleCancel () {
      this.$router.go(-1);
    },
  }
};
</script>
<style scoped>
.page-footer {
  margin-top: 10px;
}
</style>
